<template>
	<div class="wrapper miMa bfff">
		<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" :size="formSize" status-icon>
			<div class="title f18 c333 fbold mb30">修改密码</div>
			<el-form-item label="旧密码" prop="oldPassword">
				<el-input
					type="password"
					clearable
					show-password
					class="name"
					v-model="ruleForm.oldPassword"
					placeholder="请输入旧密码"
				/>
				<!-- <v-password v-model="ruleForm.oldPassword" placeholder="请输入原密码"></v-password> -->
			</el-form-item>
			<el-form-item label="新密码" prop="password">
				<div>
					<v-password
						v-model="ruleForm.password"
						placeholder="请输入新密码"
						:passwordIf="passwordIf"
						@change="inputChange"
					></v-password>
					<div v-if="passwordIf" class="passwordIf">密码格式错误</div>
				</div>
			</el-form-item>
			<el-form-item label="确认密码" prop="confirmPassword">
				<el-input
					type="password"
					clearable
					show-password
					class="name"
					v-model="ruleForm.confirmPassword"
					placeholder="请输入确认密码"
				/>
				<!-- <v-password v-model="ruleForm.confirmPassword" placeholder="请再次确认新密码"></v-password> -->
			</el-form-item>
			<el-form-item label="" prop="remark">
				<div class="box-button">
					<el-button class="save-btn" type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
				</div>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
import { useUserInfoStore } from "/store/userInfo"
const { proxy } = getCurrentInstance()
import { ElMessage } from "element-plus"
import md5 from "js-md5"
const route = useRoute()
const router = useRouter()
const ruleFormRef = ref()
const ruleForm = reactive({
	oldPassword: "",
	password: "",
	confirmPassword: "",
})
const rules = reactive({
	oldPassword: [
		{
			required: true,
			message: "请输入旧密码",
			trigger: "blur",
		},
		// { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
	],
	password: [{ required: true, message: "请输入新密码", trigger: "blur" }],
	confirmPassword: [
		{
			required: true,
			message: "再次确认密码",
			trigger: "blur",
		},
	],
})
function passwordValidator(value) {
	let count = 0
	let isNumber = /[0-9]/
	let isUpperLetter = /[A-Z]/
	let isLowerLetter = /[a-z]/
	let valueList = value.split("")
	let obj = {}
	for (let i = 0; i < value.length; i++) {
		if (obj[value[i]]) {
			obj[value[i]] += 1
		} else {
			obj[value[i]] = 0
		}
	}
	let objList = Object.values(obj)
	let objListIf = false
	objList.forEach(item => {
		if (item >= 3) {
			objListIf = true
		}
	})
	if (value) {
		if (valueList.length < 8 || valueList.length > 16) {
			return false
		}
		if (objListIf) {
			return false
		}
		if (isNumber.test(value)) {
			count++
		}

		if (isUpperLetter.test(value)) {
			count++
		}

		if (isLowerLetter.test(value)) {
			count++
		}
		if (count == 3) {
			return true
		} else {
			return false
		}
	} else {
		return false
	}
}
const userInfo = ref({})
const passwordIf = ref(false)
const submitForm = async formEl => {
	if (!formEl) return
	await formEl.validate(async (valid, fields) => {
		if (!passwordIf.value) {
			return
		}
		if (valid) {
			if (ruleForm.password == ruleForm.confirmPassword) {
				userInfo.value.oldPassword = md5(ruleForm.oldPassword)
				userInfo.value.password = md5(ruleForm.password)
				try {
					await postAxios("/system/sysUser/personUptPwd", userInfo.value)
					ElMessage.success("密码修改成功，请重新登录")
					ruleForm.oldPassword = ""
					ruleForm.password = ""
					ruleForm.confirmPassword = ""
					const userInfoStore = useUserInfoStore()
					userInfoStore.logout()
				} catch (error) {
					ElMessage.error(error)
				}
			} else {
				ElMessage.error("两次密码不一致，请重新输入")
			}
		} else {
			console.log("error submit!", fields)
		}
	})
}
async function created() {
	userInfo.value = await getAxios("/system/sysUser/personInfo")
}
created()
const inputChange = () => {
	if (!passwordValidator(ruleForm.password)) {
		return (passwordIf.value = true)
	} else {
		return (passwordIf.value = false)
	}
}
</script>
<style lang="scss" scoped>
@import "/style/basis";
.miMa {
	padding: 30px 40px;
	.save-btn {
		margin-left: 200px;
		margin-top: 50px;
		@include maxWidth(768) {
			margin-left: 40vw;
		}
	}
	.passwordIf {
		font-size: 12px;
		color: #f56c6c;
	}

	.name {
		width: 400px;
		:deep(.el-input__validateIcon) {
			display: none;
		}
	}

	:deep(.el-form-item__label) {
		width: 200px;
		@include maxWidth(768) {
			width: 15vw;
		}
	}
	.box-button {
		width: 500px;
		display: flex;
		justify-content: center;
	}
	:deep(.el-form-item__label) {
		min-width: 100px;
	}
	.label-icon {
		margin-left: 5px;
		padding-top: 15px;
	}
}
</style>
